<template>
  <div class="login">
    <div class="bg"></div>
    <div class="form">
      <div class="header">
        账号登录
      </div>
      <div class="content">
        <div class="tips">账号：</div>
        <div class="input">
          <a-input placeholder="请输入账号" v-model="account"/>
        </div>
        <div class="tips">密码：</div>
        <div class="input">
          <a-input placeholder="请输入密码" type="password" v-model="password"/>
        </div>
        <div class="tips">验证码：</div>
        <div class="input verification">
          <a-input placeholder="请输入验证码" v-model="code"/>
          <div class="verification-code">
            <img :src="imgDataURL" class="img"/>
            <div class="change">
              <span @click="getVerificationCode">换一张</span>
            </div>
          </div>
        </div>
        <a-button :disabled="!account || !password || !code" type="primary" class="button" @click="login">登录</a-button>
        <div class="message">没有账号？请联系管理员！</div>
      </div>
    </div>
  </div>
</template>

<script>
import { verificationCodeCreate } from '../../utils/verificationCode';
export default {
  name: 'Login',
  data() {
    return {
      imgDataURL: '',
      key: '',
      account: '',
      password: '',
      code: ''
    };
  },
  created() {
    this.timestamp();
  },
  methods: {
    // 生成时间戳
    timestamp() {
      let timestamp = (new Date()).valueOf();
      console.log('timestamp', timestamp);
      this.key = timestamp;
      this.getVerificationCode();
    },
    // 获取验证码
    getVerificationCode() {
      this.$api.login.getVerificationCode({key: this.key})
        .then(res => {
          console.log('res', res, this.key);
          this.initVerificationCode(res);
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 登录
    login() {
      if(!this.account || !this.password || !this.code) {
        this.$message.error('请填写必要信息');
      }
      this.$api.login.login({
        key: String(this.key),
        account: this.account,
        password: this.password,
        code: this.code
      })
        .then(res => {
          console.log('res', res);
          let token = '';
          token = res.tokenHead + res.token;
          console.log('token', token);
          localStorage.setItem('token', token);
          this.getUserInfo();
        })
        .catch(() => {
          this.timestamp();
        });
    },
    // 获取当前登陆用户信息
    getUserInfo() {
      this.$api.login.getUserByToken()
        .then(res => {
          console.log('res', res);
          localStorage.setItem('userInfo', JSON.stringify(res));
          if (res.type) {
            this.$router.push('/developer/function');
          } else {
            this.$router.push('/platform/platformmanagement');
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    initVerificationCode(str) {
      let result = verificationCodeCreate(str);
      this.imgDataURL = result.dataURL;
    }
  }
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.login{
  height: 100%;
  background: linear-gradient(180deg, #2A60FE 0%, #3F85FF 100%);
  display: flex;
  text-align: left;
  .bg{
    width: 60%;
    min-width: 770px;
    background: url(../../assets/img/login_bg.png) no-repeat center center;
    background-size: cover;
  }
  .form{
    margin: auto;
    margin-left: 21px;
    width: 400px;
    height: 482px;
    background: #F9F9F9;
    // box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.1), 5px 5px 7px 0px rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    .header{
      height: 60px;
      background: #E9ECF2;
      border-radius: 10px 10px 0px 0px;
      padding: 0 24px;
      line-height: 60px;
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 600;
      color: #666666;
      letter-spacing: 1px;
    }
    .content{
      width: 400px;
      flex: 1;
      padding: 24px 40px 28px 40px;
      .tips{
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        margin-bottom: 8px;
      }
      .input{
        height: 64px;
        input{
          height: 40px;
          // border: 1px solid #D9D9D9;
        }
      }
      .verification{
        display: flex;
        justify-content: space-between;
        input{
          width: 230px;
        }
        .verification-code{
          height: 40px;
          width: 82px;
          // background: #21C7FC;
          position: relative;
          .img{
            height: 40px;
            width: 82px;
            border: none;
          }
          .change{
            position: absolute;
            width: 100%;
            height: 16px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #1890FF;
            text-align: center;
            bottom: -18px;
            text-decoration: underline;
            span{
              cursor: pointer;
            }
          }
        }
      }
      .button{
        margin-top: 12px;
        width: 100%;
        height: 44px;
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
      }
      .message{
        text-align: center;
        margin-top: 12px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
      }
    }
  }
}
</style>
